<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
<base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>拖拽选址</title>
<style>
html, body {
	height: 100%;
	margin: 0;
	width: 100%;
	padding: 0;
	overflow: hidden;
	font-size: 13px;
}

.map {
	height: 100%;
	width: 60%;
	float: left;
}

#right {
	color: #444;
	background-color: #f8f8f8;
	width: 40%;
	float: left;
	height: 100%;
}

#start, #stop, #right input {
	margin: 4px;
	margin-left: 15px;
}

.title {
	width: 100%;
	background-color: #dadada
}

button {
	border: solid 1px;
	margin-left: 15px;
	background-color: #dadafa;
}

.c {
	font-weight: 600;
	padding-left: 15px;
	padding-top: 4px;
}

#lnglat, #address, #nearestJunction, #nearestRoad, #nearestPOI, .title {
	padding-left: 15px;
}
</style>
</head>

<body>
	<div id="container" class="map" tabindex="0" style="width: 100%;"></div>
	<div id='right' style="display: none;">
		<div>
			<div class='title'>选择模式</div>
			<input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
			</br> <input type='radio' name='mode' value='dragMarker'>拖拽Marker模式</input>
		</div>
		<div>
			<button id='start'>开始选点</button>
			<button id='stop'>关闭选点</button>
		</div>
		<div>
			<div class='title'>选址结果</div>
			<div class='c'>经纬度:</div>
			<div id='lnglat'></div>
			<div class='c'>地址:</div>
			<div id='address'></div>
			<div class='c'>最近的路口:</div>
			<div id='nearestJunction'></div>
			<div class='c'>最近的路:</div>
			<div id='nearestRoad'></div>
			<div class='c'>最近的POI:</div>
			<div id='nearestPOI'></div>
		</div>
	</div>
<!-- 	<script src="/layui/jquery.min.js"></script> -->
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=92e7977f8895394232e79ee834a05c36&plugin=AMap.ToolBar"></script>
	<input id="spanLng" type="text" th:value="${lng != null ? lng : '116.404'}" value="0" style="display: none;" />
	<input id="spanLat" type="text" th:value="${lat != null ? lat : '39.915'}" value="0" style="display: none;" />
	<!-- UI组件库 1.0 -->
	<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
	<script type="text/javascript">
		AMapUI.loadUI(
			[ 'misc/PositionPicker' ],
			function(PositionPicker) {
				var map = new AMap.Map('container', {
					zoom : 16,
					scrollWheel : false
				})
				var positionPicker = new PositionPicker({
					mode : 'dragMap',
					map : map
				});
				var spanLng = document.getElementById('spanLng').value;
				var spanLat = document.getElementById('spanLat').value;
				if(spanLng.length > 0 && spanLat.length > 0){
					var markerPosition = [parseFloat(spanLng),parseFloat(spanLat)];
					map.panTo(markerPosition);
				}
				positionPicker.on('success',function(positionResult) {
					document.getElementById('spanLng').value = positionResult.position.lng;
					document.getElementById('spanLat').value = positionResult.position.lat;
					document.getElementById('lnglat').innerHTML = positionResult.position;
					document.getElementById('address').innerHTML = positionResult.address;
					document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
					document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
					document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
				});
				positionPicker.on('fail',function(positionResult) {
					document.getElementById('lnglat').innerHTML = ' ';
					document.getElementById('address').innerHTML = ' ';
					document.getElementById('nearestJunction').innerHTML = ' ';
					document.getElementById('nearestRoad').innerHTML = ' ';
					document.getElementById('nearestPOI').innerHTML = ' ';
				});
				var onModeChange = function(e) {
					positionPicker.setMode(e.target.value)
				}
				var startButton = document.getElementById('start');
				var stopButton = document.getElementById('stop');
				var dragMapMode = document.getElementsByName('mode')[0];
				var dragMarkerMode = document.getElementsByName('mode')[1];
				AMap.event.addDomListener(startButton, 'click',function() {
							positionPicker.start(map.getBounds().getSouthWest())
						})
				AMap.event.addDomListener(stopButton, 'click',function() {
							positionPicker.stop();
						})
				AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
				AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);
				var scrollFunc=function(e){
				     e=e || window.event;
				     var t1=document.getElementById("mapInfo");
				         t1.value=map.getZoom();
				 }
				 /*注册事件*/
				 if(document.addEventListener){
				     document.addEventListener("DOMMouseScroll",scrollFunc,false);
				 }//W3C
				 window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
				positionPicker.start();
				map.panBy(0, 1);
				map.addControl(new AMap.ToolBar({
					liteStyle : true
				}))
			});
	</script>
</body>
</html>